<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input v-model="filterText" placeholder="输入关键字进行过滤" />
        <el-scrollbar style="height: calc(100vh - 102px); background-color: #FFF;">
          <el-tree
            ref="tree"
            v-loading="loading"
            class="filter-tree"
            :data="data"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            :render-content="renderContent"
            node-key="id"
            highlight-current
            :expand-on-click-node="false"
            @node-click="nodeClick"
          />
        </el-scrollbar>
      </el-col>
      <el-col :span="18" style="padding-left: 0px;">
        <div class="form-container">
          <el-form ref="form" :model="form" :rules="rules" label-position="top">
            <el-row style="background-color: #F2F6FC; padding: 10px;">
              <el-col>
                <el-button size="mini" icon="el-icon-refresh" @click="refresh">刷 新</el-button>
                <el-button size="mini" @click="cancel">取 消</el-button>
                <el-button size="mini" :disabled="deleteDisabled" @click="del">删 除</el-button>
                <el-button size="mini" @click="add">新 增</el-button>
                <el-button size="mini" @click="save">保 存</el-button>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 10px;">
              <el-col :span="12">
                <el-form-item label="父级编码" prop="parentCode">
                  <el-input v-model="form.parentCode" size="mini" autocomplete="off" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="父级名称" prop="parentName">
                  <el-input v-model="form.parentName" size="mini" autocomplete="off" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="路由" prop="route">
                  <el-input v-model="form.route" size="mini" autocomplete="off" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="编码" prop="code">
                  <el-input v-model="form.code" size="mini" autocomplete="off" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="名称" prop="name">
                  <el-input v-model="form.name" size="mini" autocomplete="off" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="状态">
                  <el-radio-group v-model="form.state" @change="void 0">
                    <el-radio :label="'0'">禁用</el-radio>
                    <el-radio :label="'1'">启用</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="顺序" prop="sort">
                  <el-input v-model="form.sort" size="mini" autocomplete="off" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="值" prop="value">
                  <el-input v-model="form.value" type="textarea" :rows="2" size="mini" autocomplete="off" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="form.remark" type="textarea" :rows="2" size="mini" autocomplete="off" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  components: {
  },
  filters: {
  },
  data() {
    return {
      form: {
        id: 0,
        parentId: 0,
        parentCode: '',
        parentName: '',
        route: '',
        code: '',
        name: '',
        state: '1',
        sort: '0',
        value: '',
        remark: ''
      },
      rules: {
        code: {
          required: true,
          message: '不能为空',
          trigger: 'blur'
        },
        name: {
          required: true,
          message: '不能为空',
          trigger: 'blur'
        }
      },
      loading: false,
      deleteDisabled: true,
      // 搜索框
      filterText: '',
      // 树结构数据
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    renderContent(h, { node, data, store }) {
      return (
        <span class='el-tree-node__label'>
          <span>{node.label}</span>
        </span>
      )
    },
    nodeClick(data, node, _self) {
      this.deleteDisabled = !node.isLeaf
      this.form.id = data.id
      this.form.parentId = data.parentId
      this.form.parentCode = data.parentCode
      this.form.parentName = data.parentName
      this.form.route = data.route
      this.form.code = data.code
      this.form.name = data.name
      this.form.state = data.state
      this.form.sort = data.sort
      this.form.value = data.value
      this.form.remark = data.remark
    },
    refresh() {
      this.getData()
    },
    cancel() {
      this.deleteDisabled = true
      this.form.id = 0
      this.form.parentId = 0
      this.form.parentCode = ''
      this.form.parentName = ''
      this.form.route = ''
      this.form.code = ''
      this.form.name = ''
      this.form.state = '1'
      this.form.sort = 0
      this.form.value = ''
      this.form.remark = ''
      this.$refs.form.resetFields()
    },
    del() {
      this.$confirm('删除, 是否继续?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var params = {
          id: this.form.id
        }
        this.$store.dispatch('system/dictionary/remove', params).then((data) => {
          this.$message({ message: '删除成功', type: 'success' })
          this.refresh()
        })
      })
      .catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    add() {
      const parentId = this.form.id
      const parentCode = this.form.code
      const parentName = this.form.name
      this.cancel()
      this.form.parentId = parentId
      this.form.parentCode = parentCode
      this.form.parentName = parentName
    },
    save() {
      const formName = 'form'
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url
          if (!this.form.id) {
            url = 'system/dictionary/add'
          } else {
            url = 'system/dictionary/edit'
          }
          this.$store.dispatch(url, this.form).then((data) => {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.refresh()
          })
        }
      })
    },
    // 获取数据
    async getData() {
      this.loading = true
      const params = {
      }
      this.$store.dispatch('system/dictionary/tree', params).then((data) => {
        this.data = data
        this.loading = false
      })
    },
    rowClick(row, column, event) {
      this.selectRow = row
      console.log(row)
    },
    dateFormat(date) {
      if (date === undefined) {
        return ''
      }
      return this.$Utils.formatDate(new Date(date))
    },
    // 页码改变事件``
    handleCurrentChange(val) {
      this.pageVo.currentPage = val
      this.getData()
    },
    // 页数改变事件
    handleSizeChange(val) {
      this.pageVo.pageSize = val
      this.pageVo.currentPage = 1
      this.getData()
    },
    // 多选框触发事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>
<style lang="scss">
.condition-search-form {
  text-align: left;
}
.app-container {
  padding: 10px;
  box-sizing: border-box;
  .app-container-container {
    padding: 10px;
    margin: 6px 0 0;
    background: #fff;
  }
}

.el-table .warning-row {
  background: rgb(156, 205, 205);
}

.el-table .success-row {
  background: rgb(255, 255, 225);
}
.el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
